<template>
  <view class="extend flex flex-c" :style="{ paddingTop: statusBarHeight }">
    <view class="bg"></view>
    <image class="head-bg" src="../../assets/images/icons/head-bg.png" />
    <view class="search flex flex-a flex-bt" :style="{ top: statusBarHeight }">
      <view class="s-box flex flex-a flex-bt">
        <view class="flex flex-bt f1">
          <image
            src="../../assets/images/icons/search.png"
            mode="scaleToFill"
            style="width: 40rpx; height: 40rpx"
          />
          <input
            v-model="query.taskName"
            placeholder="请输入关键字"
            placeholder-class="input-placeholder"
            class="input"
            confirmType="search"
            @confirm="onSearch"
          />
        </view>
        <view @click="onSearch" class="s-btn fs-24 bold">搜索</view>
      </view>
      <image
        src="../../assets/images/icons/filter.png"
        mode="scaleToFill"
        style="width: 48rpx; height: 48rpx"
        @click="onShowFilter"
        class="filter"
      />
    </view>
    <view class="list-container" :style="{ top: listTop }">
      <scroll-view class="scroll-box" scroll-y @scrolltolower="onScroll">
        <view v-if="list.length" class="list">
          <view v-for="(item,index) in list" :key="index">
            <Card :info="item"></Card>
          </view>          
        </view>
        <Empty v-if="!list.length && !isLoading" :pic="require('../../assets/images/empty/normal-1.png')">
          <template v-if="!userInfo.userId" #extra>
            <view
              style="height: 80rpx; width: 224rpx; margin-top: 40rpx"
              class="active-btn"
              @click="toLogin"
            >
              去登录
            </view>
          </template>
        </Empty>
      </scroll-view>
      <FilterPopup
        @close="onClose"
        @confirm="onConfirm"
        @reset="onReset"
        :selecetdVal="selecetdVal"
        :origin="origin"
        :filters="filters"
        :show="showFilter"
        :pathName="'path'"
      />
    </view>
  </view>
</template>

<script>
import { schemas } from "../../assets/utils/config";
import { statusBarHeight } from "../../assets/utils/config.js";
import { getTaskList } from "../../api/extend/index";
import Card from "./components/card.vue";
import FilterPopup from "../../compennts/filter/index.vue";
import Empty from "../../compennts/empty/index.vue";
import { extendsFilters } from "../../assets/utils/constance";
import { copyObj } from "../../assets/utils";
import { getLocalUserInfo } from "../../assets/utils";
import {
  formatDate,
  getDayBegin,
  getDayEnd,
  getMonthStartDay,
  getMonthEndDay,
} from "../../assets/utils/date";
export default {
  components: {
    Card,
    FilterPopup,
    Empty,
  },
  data() {
    return {
      statusBarHeight,
      showFilter: false,
      isLoading: false,
      filters: extendsFilters.options,
      origin: extendsFilters.default(),
      selecetdVal: extendsFilters.default(),
      query: {
        pageNum: 1,
        pageSize: 20,
        taskName: "",
        createdTimeStart: null,
        createdTimeEnd: null,
        sortType: 0,
        channelType: 0,
      },
      list: [],
      userInfo:{}
    };
  },
  computed: {
    listTop() {
      return parseInt(statusBarHeight) + 142 + "rpx";
    },
  },
  onLoad() {
    // #ifdef APP-IOS
    uni.hideHomeButton();
    // #endif
  },
  onShow() {
    this.userInfo = getLocalUserInfo()
    this.query.pageNum = 1;
    this.onGetTaskList();
  },
  watch: {
    showFilter(val) {
      if (val) {
        uni.hideTabBar();
      } else {
        setTimeout(() => {
          uni.showTabBar();
        }, 300);
      }
    },
    isLoading(val) {
      val ? uni.showLoading() : uni.hideLoading();
    },
  },
  methods: {
    toLogin(){
      uni.navigateTo({
        url:'/pages/login/index' 
      })
    },
    onShowFilter() {
      this.showFilter = true;
    },
    onSearch() {
      this.query.pageNum = 1;
      this.onGetTaskList();
    },
    onGetTaskList(isLoadMore) {
      // 判断是否登录
      console.log('===',this.userInfo)
      if(!this.userInfo?.userId){
        return  this.list = []
      }
      this.isLoading = true;
      for (let i in this.selecetdVal) {
        let value = this.selecetdVal[i].value;
        // 排序方式
        if (this.selecetdVal[i].key == "sortType") {
          this.query.sortType = value;
        }
        // 投稿渠道
        if (this.selecetdVal[i].key == "promotionChannel") {
          this.query.channelType = value;
        }
        // 创建时间
        if (this.selecetdVal[i].key == "createTime") {
          console.log(value);
          if (value !== null) {
            // XXX 日以内
            console.log('天数：',value)
            if (value <= 15) {
              this.query.createdTimeStart = formatDate(getDayBegin(value));
              if(value == 1){
                this.query.createdTimeEnd = formatDate(getDayEnd(1));
              }else{
                this.query.createdTimeEnd = formatDate(getDayEnd(0));
              }
            }
            // 本月
            else if (value == 16) {
              this.query.createdTimeStart = formatDate(getMonthStartDay(0));
              this.query.createdTimeEnd = formatDate(getDayEnd(0));
            } else {
              // 上月
              this.query.createdTimeStart = formatDate(getMonthStartDay(1));
              this.query.createdTimeEnd = formatDate(getMonthEndDay(1));
            }
          } else {
            this.query.createdTimeStart = this.query.createdTimeEnd = null;
          }
        }
      }
      console.log("query:", this.query);
      getTaskList({ ...this.query })
        .then((res) => {
          console.log(res);
          let list = res.rows || [];
          this.list = isLoadMore ? [...this.list, ...list] : list;
          console.log('===>',this.list)
        })
        .finally(() => {
          this.isLoading = false;
        });
    },
    onScroll() {
      this.query.pageNum++
      this.onGetTaskList(true);
    },
    onClose(val) {
      this.showFilter = false;
      this.selecetdVal = copyObj(this.origin);
    },
    onConfirm(val) {
      this.origin = copyObj(val);
      this.selecetdVal = copyObj(val);
      this.showFilter = false;
      this.query.pageNum = 1;
      this.onGetTaskList();
    },
    onReset() {
      this.selecetdVal = extendsFilters.default();
    },
  },
};
</script>

<style lang="less" scoped>
@import url("../../assets/styles/common.less");

.extend {
  height: 100vh;
  box-sizing: border-box;
  position: relative;
  z-index: 12;

  .bg {
    width: 100%;
    height: 100vh;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 6;
    background: linear-gradient(
      180deg,
      #93aafb 0%,
      #f7f8ff 496rpx,
      #f7f8ff 100%
    );
  }
  .head-bg {
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 7;
    user-select: none;
    pointer-events: none;
  }
  .search {
    position: sticky;
    margin-bottom: 32rpx;
    z-index: 6;
    width: 100%;
    padding: 0 32rpx;
    .s-box {
      background: #ffffff;
      height: 88rpx;
      flex: 1;
      border-radius: 16rpx;
      padding: 0 24rpx;
    }
    .input {
      flex: 1;
      padding: 0 12rpx;
    }
    .filter {
      margin-left: 16rpx;
    }
    .s-btn {
      width: 96rpx;
      height: 48rpx;
      border-radius: 8rpx;
      text-align: center;
      line-height: 48rpx;
      color: #ffffff;
      background: linear-gradient(135deg, #819cff 0%, #436af3 100%);
    }
  }
  .list-container {
    flex: 1;
    width: 100%;
    z-index: 10;
    overflow-y: scroll;
    .scroll-box {
      height: 100%;
    }
    .list {
      padding: 0 32rpx;
      padding-bottom: 1rpx;
    }
  }
}
</style>
